<template>
	<div class="publicpageview">

		<div class="publitableview">
			<el-table max-height='500px' v-loading="listLoading" :data="areaList" border fit highlight-current-row size="mini"
				ref="multiTable" @selection-change="selectChange">

				<el-table-column align="center" label="区房屋管理单位" prop="dname">
				</el-table-column>
				<el-table-column align="center" label="图形文件" prop="acachet" width="360">
					<template slot-scope="scope">
						<el-image
						 @click="chakan(scope.row.acachet)"
						      style="width: 200px; height: 50px"
						      :src="scope.row.acachet"
						      fit="contain"></el-image>
					</template>
				</el-table-column>

				<el-table-column align="center" label="收款账号" prop="accounts">
				</el-table-column>
				<el-table-column align="center" label="操作" width="140" fixed="right">
					<template slot-scope="scope">
						<el-button type="text" size="mini"
							@click="gotoxiugia(scope.row.did)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>

		</div>

		<!-- 弹窗部分 -->
		<el-dialog title="修改"
			:visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<div class="title">{{type==1?'':type==2?'合并后—管理部(分中心)信息':type==3?'被拆分—管理部(分中心)信息':type==4?'':''}}</div>
			<el-form :rules='rules' :model="addQuery" ref="addForm" class="demo-ruleForm" label-position="right"
				label-width="170px">

				<!-- <el-form-item label="区房屋管理单位：" prop="did">
					<el-select v-model="addQuery.did" @change='addAreaChange'>
						<div v-for="(item,index) in areaList" :key="index">
							<el-option :label="item.dname" :value="item.did" :key="index"></el-option>
						</div>
					</el-select>
				</el-form-item> -->
				<el-form-item label="公章：" prop="acachet">
					<el-upload class="upload-demo" drag :action="uploadAction" :file-list="fileList" :on-success="handleUploadSuccess"
						:on-error="handleUploadError" :limit="1" :on-remove="handleFileRemove" :before-upload="beforeUpload" :multiple='false'>
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					</el-upload>
				</el-form-item>
				<el-form-item label="收款账号：" prop="accounts">
					<el-input v-model="addQuery.accounts"></el-input>
				</el-form-item>
			</el-form>
			<div class="saveContent">
				<el-button type="primary" @click="qxSave" size="medium">保 存</el-button>
			</div>
		</el-dialog>
		
		
		<el-dialog title="图形资料文件" :visible.sync="isChakan" width="30%" :before-close="handleClose">
			<el-image :src="mapfile"></el-image>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isChakan = false">取 消</el-button>
				<el-button type="primary" @click="isChakan = false">确 定</el-button>
			</span>
		</el-dialog>
		

	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import * as XLSX from 'xlsx'
	import {
		getArea,
		getHouseAdmin,
		addHouseAdmin,
		updHouseAdmin,
		houseAdminDetails,
		delHouseAdmin,
		houseAdminMerge,
		blockGroupList,
		houseAdminSplit,
		permissionApply,
		delMultipleHouseAdmin,
		update
	} from '@/api/industry'
	export default {
		name: 'AccommodationManagementChanquanzhengjian',

		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					areaUnit: '',
					AName: ''
				},
				addQuery: {
					acachet: '',
					accounts:'',
					did:''
				},

				rules: {
					DID: [{
						required: true,
						message: '请选择区房屋管理单位',
						trigger: 'blur'
					}],
					AName: [{
						required: true,
						message: '请输入管理部(分中心)',
						trigger: 'blur'
					}]
					// asn: [{
					// 	required: true,
					// 	message: '请输入管理部(分中心)代码',
					// 	trigger: 'blur'
					// }]
				},
				tjQuery: {
					DID: '',
					AName: '',
					asn: '',
					dname: ''
				},
				total: 0,
				options: [{
					key: '1'
				}],
				list: [],
				allList: [], //获取所以管理部列表
				listLoading: false,
				dialogVisible: false,
				chaifenVisible: false,
				cexiaoLookVisible: false,
				formData: {
					userId: '',
					userName: '',
					phone: '',
					deptId: '',
					roleId: '',
					userStatus: '1',
					remarks: ''
				},
				qxQuery: {
					endTime: '',
					permission: '',
					remake: '',
					startTime: '',
					userName: ''
				},
				type: '',
				cfType: '',
				// 区房屋管理单位
				areaList: [],
				// 根据区获取部门
				HouseList: [],
				// 当前部门id
				aid: '',
				// 合并列表
				hebingList: [],
				// 合并弹窗列表
				hbSelectList: [],
				// 是否展示拆分添加列表
				isChaifenAdd: false,
				// 拆分添加列表
				chaifenAddList: [],
				// 是否展示拆分管片
				isChaifenguanpian: false,
				// 管片列表
				guanpianList: [],
				// 管片被选择列表
				guanpianSelectList: [],
				newAid: '',
				//拆分结果
				sonGroupList: [],
				isQuanxian: false,
				aname: '',
				arrID: [],
				userList: [],
				
				uploadAction: 'http://125.39.77.18:9021/mall-admin/fileUpload/upload',
					fileList: [],
				  currentFileSrc: [],
				isChakan: false,
				mapfile:''
			}
		},

		computed: {},

		mounted() {
			this.qxQuery.userName = localStorage.getItem('username')
			this.getArea()
			this.userList = JSON.parse(localStorage.getItem('userList'))
		},

		methods: {
			isCompute(name) {
				if (this.userList.find((item) => item.permission === name)) {
					return true
				} else {
					return false
				}
			},
			// 权限申请
			openQuanxian() {
				this.isQuanxian = true
			},
			gotoxiugia(did){
				console.log(did)
				this.addQuery.did = did
				this.dialogVisible = true
			},
			qxSave() {
				let data = {
					acachet:this.addQuery.acachet,
					accounts:this.addQuery.accounts,
					did:this.addQuery.did
				}
				update(data).then(res=>{
					console.log(res)
					this.$message({
						type: 'success',
						message: '操作成功!'
					})
					this.dialogVisible = false
						this.getArea()
				})
			},
			getArea() {
				getArea().then((res) => {
					console.log(res)
					this.areaList = res.data
				})
			},
			getHouseAdmin(e) {
				getHouseAdmin({
					DID: e
				}).then((res) => {
					this.HouseList = res.data
				})
			},
			// 选择区房屋管理
			areaChange(e) {
				console.log(e)
				this.listQuery.areaUnit = e
				this.listQuery.AName = ''
				// this.getHouseAdmin(e)
			},
			// 根据区获取部门
			HouseChange(e) {
				console.log(e)
				this.listQuery.AName = e
			},
			// 查询
			sumbitCx() {
			},
			// 重置
			resetTop() {
				;
				(this.listQuery.AName = ''),
				(this.listQuery.areaUnit = ''),
				(this.listQuery.pageSize = 20),
				(this.listQuery.pageNum = 1)
			},
			// 弹窗保存
			save() {
				console.log(this.type)
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						if (this.type == 6) {
							this.addHouseAdmin()
						} else if (this.type == 1) {
							this.updHouseAdmin()
						}
					} else {
						console.log('验证失败！')
						return false
					}
				})
			},
			// 添加部门
			addHouseAdmin() {
				let data = {
					aname: this.addQuery.AName,
					did: this.addQuery.DID,
					asn: this.addQuery.asn
				}
				addHouseAdmin(data).then((res) => {
					this.$message(res.message)
					this.dialogVisible = false
					this.popupreset()
				})
			},
			// 部门弹窗选择区房屋管理
			addAreaChange(e) {
				console.log(e)
				this.addQuery.did = e
				this.addQuery.AName = ''
				// this.getHouseAdmin(e)
			},
			// 修改部门
			updHouseAdmin() {
				let data = {
					aname: this.addQuery.AName,
					did: this.addQuery.DID,
					asn: this.addQuery.asn,
					aid: this.aid
				}
				updHouseAdmin(data).then((res) => {
					this.$message(res.message)
					this.dialogVisible = false
					this.popupreset()
				})
			},
			// 重置弹窗
			popupreset() {
				;
				(this.addQuery.AName = ''),
				(this.addQuery.DID = ''),
				(this.addQuery.asn = ''),
				(this.aid = '')
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1
				this.listQuery.pageSize = val
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val
			},

			resetForm(val) {
				console.log('1')
				this.$refs[val].resetFields()
			},

			handleAddUser() {
				this.$router.push('chanquanziliaoluru')
			},
			handleUpdate(currentData, type) {
				let userList = JSON.parse(localStorage.getItem('userList'))
				if (type == 6) {
					if (!userList.find((item) => item.permission === '管理部-录入')) {
						this.$message({
							type: 'success',
							message: '请申请“管理部-录入”权限或刷新页面!'
						})
					} else {
						this.dialogVisible = true
					}
				} else if (type == 2) {
					if (!userList.find((item) => item.permission === '管理部-合并')) {
						this.$message({
							type: 'success',
							message: '请申请“管理部-合并”权限或刷新页面!'
						})
					} else {
						this.dialogVisible = true
					}
				} else if (type == 3) {
					if (!userList.find((item) => item.permission === '管理部-拆分')) {
						this.$message({
							type: 'success',
							message: '请申请“管理部-拆分”权限或刷新页面!'
						})
					} else {
						this.dialogVisible = true
					}
				} else if (type == 1) {
					if (!userList.find((item) => item.permission === '管理部-修改')) {
						this.$message({
							type: 'success',
							message: '请申请“管理部-修改”权限或刷新页面!'
						})
					} else {
						this.dialogVisible = true
					}
				} else {
					this.dialogVisible = true
				}

				console.log(currentData)
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.type = type
				this.$nextTick(() => {
					this.aid = currentData
				})
				if (type == 5 || type == 1 || type == 3) {
					let data = {
						aid: currentData
					}
					houseAdminDetails(data).then((res) => {
						console.log(res);
						(this.addQuery.AName = res.data.aname),
						(this.addQuery.DID = res.data.did),
						(this.addQuery.asn = res.data.asn)
					})
				}
			},
			handleDelete(e) {
				let userList = JSON.parse(localStorage.getItem('userList'))
				if (!userList.find((item) => item.permission === '管理部-删除')) {
					this.$message({
						type: 'success',
						message: '请申请“管理部-删除”权限或刷新页面!'
					})
				} else {
					this.$confirm(
							'此操作将删除该条内容，请确认是否继续操作？',
							'删除提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}
						)
						.then(() => {
							let data = {
								AID: e
							}
							delHouseAdmin(data).then((res) => {
								this.$message({
									type: 'success',
									message: '删除成功!'
								})
								this.popupreset()
							})
						})
						.catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							})
						})
				}
			},
			// 合并外层选择器
			selectChange(e) {
				console.log(e)
				this.hebingList = e

				let arrID = []
				e.forEach((item, index) => {
					arrID.push(item.aid)
				})
				this.arrID = arrID
			},
			alldelete() {
				let userList = JSON.parse(localStorage.getItem('userList'))
				if (!userList.find((item) => item.permission === '管理部-批量删除')) {
					this.$message({
						type: 'success',
						message: '请申请“管理部-批量删除”权限或刷新页面!'
					})
				} else {
					console.log(this.arrID)
					if (this.arrID.length > 0) {
						let data = {
							AID: this.arrID
						}
						delMultipleHouseAdmin(data).then((res) => {
							console.log(res)
							this.$message({
								type: 'success',
								message: '操作成功'
							})
						})
					} else {
						this.$message({
							type: 'success',
							message: '请选择删除对象!'
						})
					}
				}
			},
			// 合并弹窗选择器
			// hebingChange(e){
			// 	console.log(e)
			// 	this.hbSelectList = e
			// },
			// 合并删除
			hebingleDelete(e) {
				this.hebingList.forEach((item, index) => {
					if (item.aid == e) {
						this.hebingList.splice(index, 1)
					}
				})
			},
			// 合并管理部
			hebingGlb() {
				let houseAdminIds = []
				this.hebingList.forEach((item, index) => {
					houseAdminIds.push(item.aid)
				})
				console.log(houseAdminIds)
				let data = {
					aname: this.addQuery.AName,
					did: this.addQuery.DID,
					asn: this.addQuery.asn,
					houseAdminIds: houseAdminIds
				}
				houseAdminMerge(data).then((res) => {
					console.log(res)
					this.$message(res.message)
					this.dialogVisible = false
					this.popupreset()
				})
			},
			// 合并添加
			hebingAdd() {
				this.dialogVisible = false
			},
			// 拆分
			chaifenEdit(id, type) {
				this.cfType = type
				this.chaifenVisible = true
				this.$nextTick(() => {
					this.formData = {
						...currentData
					}
				})
			},
			// 拆分添加列表展示
			chaifenAdd() {
				this.isChaifenAdd = true
			},
			// 部门弹窗选择区房屋管理
			chaifenaddAreaChange(e) {
				console.log(e)
				this.tjQuery.DID = e.did
				this.tjQuery.dname = e.dname
			},
			// 拆分添加保存
			caifenTjSave() {
				let userList = JSON.parse(localStorage.getItem('userList'))
				if (!userList.find((item) => item.permission === '管理部-录入')) {
					this.$message({
						type: 'success',
						message: '请申请“管理部-录入”权限或刷新页面!'
					})
				} else {
					let data = {
						aname: this.tjQuery.AName,
						did: this.tjQuery.DID,
						asn: this.tjQuery.asn,
						dname: this.tjQuery.dname
					}
					this.chaifenAddList.push(data)
					this.isChaifenAdd = false
					console.log(this.chaifenAddList)
				}
			},
			// 部门选择删除
			chaifenDelete(e) {
				this.chaifenAddList.forEach((item, index) => {
					if (item.aname == e.aname) {
						console.log(e, item.aid)
						this.chaifenAddList.splice(index, 1)
					}
				})
			},
			// 关闭拆分
			chaifenClose(done) {
				this.$confirm('确认关闭？')
					.then((_) => {
						done()
					})
					.catch((_) => {})
			},
			//拆分管片分配打开
			chaifenfenpei(e) {
				console.log(e)
				this.isChaifenguanpian = true
				this.aname = e.aname
				let data = {
					group: '',
					groupNumber: '',
					houseAdmin: this.aid,
					pageNum: '',
					pageSize: ''
				}
				this.listLoading = true
				blockGroupList(data).then((res) => {
					this.guanpianList = res.data.list
					this.listLoading = false
				})
			},
			// 拆分管片分配添加选择
			chaifenguanpianChange(e) {
				this.guanpianSelectList = e
				let sonGroupList = this.sonGroupList
				let groupNew = []
				this.guanpianSelectList.forEach((item, index) => {
					groupNew.push(item.groupno)
				})
				this.chaifenAddList.forEach((item, index) => {
					if (this.aname == item.aname) {
						item.groupNew = groupNew
					}
				})
			},
			// 关闭拆分管片分配页面
			chaifenguanpianClose(done) {
				this.$confirm('确认关闭？')
					.then((_) => {
						this.$refs.chaifenguanpianTable.clearSelection()
						this.sonGroupList = []
						this.chaifenAddList = []
						this.guanpianSelectList = []
						done()
					})
					.catch((_) => {})
			},
			//拆分管片分配保存
			caifenguanpianSave() {
				this.isChaifenguanpian = false
			},
			// 拆分保存
			chaifenSave() {
				console.log(this.chaifenAddList)
				let sonGroupList = []
				this.chaifenAddList.forEach((item, index) => {
					sonGroupList.push({
						aname: item.aname,
						aprefix: item.asn,
						did: item.did,
						groupNew: item.groupNew
					})
				})
				let data = {
					sonGroupList: sonGroupList,
					aid: this.aid
				}
				houseAdminSplit(data).then((res) => {
					console.log(res)
					this.$message(res.message)
					this.dialogVisible = false
					this.popupreset()
					this.sonGroupList = []
					this.chaifenAddList = []
					this.guanpianSelectList = []
				})
			},
			// 撤销
			// 查看
			cexiaoLook() {
				this.cexiaoLookVisible = true
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then((_) => {
						done()
					})
					.catch((_) => {})
			},

			handleout() {
				this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							AName: this.listQuery.AName,
							DID: this.listQuery.areaUnit,
							pageSize: 999999,
							pageNum: this.listQuery.pageNum
						}
						houseAdminList(data).then((res) => {
							let list = res.data.list
							let outList = []
							res.data.list.forEach((item, index) => {
								outList.push({
									区房屋管理单位: item.dname,
									'管理部(分中心)代码': item.asn,
									'管理部(分中心)': item.aname
								})
							})
							// 获取表格数据
							const data = outList
							// 转换数据为工作表
							const worksheet = XLSX.utils.json_to_sheet(data)
							// 创建新的工作簿
							const workbook = XLSX.utils.book_new()
							// 将工作表添加到工作簿
							XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
							// 导出Excel文件
							XLSX.writeFile(workbook, '管理部资料.xlsx')
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消导出'
						})
					})
			},
			// 上传成功
			handleUploadSuccess(response, file, fileList) {
				this.fileList = fileList
				if (response.code == 200) {
					this.$message.success('文件上传成功');
					this.currentFileSrc.push(response.data)
					this.addQuery.acachet = response.data.url
				} else {
					this.$message.error('文件上传失败');
					let arr = [...fileList.map(i => i)]
					arr.pop();
					this.fileList = arr;
			
				}
			},
			// 上传失败
			handleUploadError(err, file) {
				this.$message.error('文件上传失败');
			},
				// 文件选择变化
				handleFileRemove(file, fileList) {
					this.fileList = fileList;
					let arr = [...this.currentFileSrc];
					let i;
					arr.forEach((item, index) => {
						if (item.fileSize == file.size && item.name == file.name) {
							i = index
						}
					})
					arr.splice(i, 1);
					this.currentFileSrc = arr;
					console.log(this.currentFileSrc)
			
				},
				// 上传前验证
				beforeUpload(file) {
					const isExcel = file.type === 'application/vnd.ms-excel' ||
						file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
					// if (!isExcel) {
					//     this.$message.error('只能上传 Excel 文件！');
					//     return false;
					// }
			
					const isLt2M = file.size / 1024 / 1024 < 2;
					if (!isLt2M) {
						this.$message.error('上传文件大小不能超过 2MB!');
						return false;
					}
			
					return true;
				},
				chakan(type) {
					this.isChakan = true
					this.mapfile = type
				},
		}
	}
</script>
<style scoped>
	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.saveContents {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.title {
		color: #008c93;
		text-align: center;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.cfguanpian {
		padding-bottom: 20px;
		color: #008c93;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.title2 {
		color: #008c93;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.chaifenAddPopup {
		position: absolute;
		width: 80%;
		height: 80%;
		background-color: rgba(0, 0, 0, 0.4);
		top: 10%;
		left: 10%;
	}

	.publitableview {}
</style>